<template>
	<view class="">
<!-- 		<Header @tishI="questionsSubmitTestPaper"></Header> -->
		<view class="jishiqi borde-padd-24 flex-line-height">
			<image style="width: 32rpx;height: 32rpx;margin-right: 8rpx;" :src="imgUrl+'/shjian.png'" mode=""></image>
			<view class="">
				已用时 <text class="tim">{{formatTime}}</text>
			</view>
		</view>
		<view class="borde-padd-24">
			<!-- tabInde -->
			<view class="flex cltitle">
				<view class="tsiy">
					{{single_tmp_list[tabInde].question_type==1?'单选题':single_tmp_list[tabInde].question_type==2?'多选题':'判断题'}}
				</view>
				<text>{{single_tmp_list[tabInde].stem}}</text>
			</view>	
		    <view @click="SingleChoice(tabInde,index)" :class="{
				active:single_tmp_list[tabInde].isIndex==index
			}" v-for="(item,index) in single_tmp_list[tabInde].option" class="xuanxLisy  flex-line-height">
				<text class="TsnA">{{index}}</text>
				<text class="TsnC">{{item}}</text>
			</view>	
		</view>	
		
		<view class="footer-tiku flex-height-between borde-padd-24">
			<view class="left-fs" @click="upper"><image class="im" :src="imgUrl+'/left-1.png'" mode=""></image>上一题  </view>
			<view class="conter-fs" @click="isTabModel=true"><image class="im" :src="imgUrl+'/tilisy.png'" mode=""></image> {{tabInde+1}}/{{single_tmp_list.length}}</view>
			<view class="right-fs" @click="next" v-if="tabInde+1<single_tmp_list.length">下一题<image class="im" :src="imgUrl+'/right-1.png'" mode=""></image></view>
			<view class="right-fs" @click="questionsSubmitTestPaper" v-else>交卷<image class="im" :src="imgUrl+'/right-1.png'" mode=""></image></view>
		</view>
		<view class="xianshConer borde-padd-24" v-if="isTabModel">
			<image @click="isTabModel=false" class="quxiao" :src="imgUrl+'/quxiaoLujing.png'" mode=""></image>
			<view>
				<view class="xianshConer-title">单选题</view>
				<view class="flex-wrap">
					<view class="xuan-list"
					 @click="taConteFun(1,index)"
					 :class="{
					 	active:item.answer_a,
					 	acCome:tabInde==index,
					 }"
					 v-for="(item,index) in single_tmp_list">{{index+1}}</view>
				</view>
			</view>
		</view>
		<view class="pop-model" v-if="isTabModel" @click="isTabModel=false"></view>
	</view>
</template>

<script>
	import Header from "../../components/header.vue"
	import {
		Request
	} from '@/utils/request.js'
	export default{
		components:{
			Header
		},
		data(){
			return{
				idUes:'',
				isTabModel:false,
				tmp_list:[],
				imgUrl:this.imgUrl,
				tabInde:0,
				imgUrl:this.imgUrl,
				single_tmp_list:[],
				many_tmp_list:[],
				judge_tmp_list:[],
				tmpType:1,
				time: 0,
				// console.log(single_tmp_list)//单选
				// console.log(many_tmp_list)//多选
				// console.log(judge_tmp_list)//判断题
			}
		},
		onLoad({examination_id,id,tid}) {
			this.idUes= id ||''
			this.examination_id= examination_id ||''
			//console.log(examination_id);
			this.tid= tid ||''
			this.get_paper_list();
			this.startTimer()
		},
		computed: {
		    formatTime() {
		      const minutes = Math.floor(this.time / 60)
		      const seconds = this.time % 60
		      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
		    }
		  },
		filters: {
			funConter(index) {
				if(index===0){
					answer="A"
				}else if(index===1){
					answer="C"
				}else if(index===2){
					answer="C"
				}else if(index===3){
					answer="D"
				}else if(index===4){
					answer="E"
				}else if(index===5){
					answer="F"
				}else if(index===6){
					answer="G"
				}else{
					answer=index
				}
				return answer 
			}
		},
		onUnload() {
		 clearInterval(this.timer)	
		},
		methods:{
			questionsSubmitTestPaper(){
					// answer
					let score=0;
					this.single_tmp_list.map((item)=>{
						if(item.isanswer){
							score=score+1;
						}
					})
					
					Request('questions/submitTestPaper',{
						score:Math.round(score/this.single_tmp_list.length*100),//得分
						duration:this.formatTime,//时间
						type:this.tmp_list.type,//区别1=练习2=试卷
						examination_id:this.examination_id,
					},"POST").then(()=>{
						uni.navigateTo({
							url:`/record/practice/correct?duration=${this.formatTime}&score=${Math.round(score/this.single_tmp_list.length*100)}&num=${score}&leng=${this.single_tmp_list.length}&id=${this.idUes}`
						})
					})
			},
			startTimer() {
			      this.timer = setInterval(() => {
			        this.time++
			      }, 1000)
			    },
			    stopTimer() {
			      clearInterval(this.timer)
			    },
			SingleChoice(tabIndex,index){
				let answer="A";
				if(index==1){
					answer="B"
				}else if(index==2){
					answer="C"
				}else if(index==3){
					answer="D"
				}else if(index==4){
					answer="E"
				}else if(index==5){
					answer="F"
				}else if(index==6){
					answer="G"
				}
				if(this.tmpType==1){
					this.single_tmp_list[tabIndex].answer_a=answer;
					this.single_tmp_list[tabIndex].isanswer=answer==this.single_tmp_list[tabIndex].answer;
					this.single_tmp_list[tabIndex].isIndex=index;
					this.single_tmp_list=[...this.single_tmp_list];
				}
				console.log(this.single_tmp_list[this.tabInde].id);
				Request('questions/submitQuestions',{	
					test_id:this.id,//试卷ID
					questions_id:this.single_tmp_list[this.tabInde].id,//题目ID
					user_answer:answer,//选择
					answer:this.single_tmp_list[this.tabInde].answer,//答案
					type:this.tmp_list.type,//区别1=练习2=试卷
					e_id:this.examination_id,//答题记录ID
				},"POST").then(()=>{
					
				})					
						
				
			},
			// @click="taConteFun(1,index)"
			taConteFun(tabIndex,index){
				this.tmpType=tabIndex;
				this.tabInde=index;
			},
			next(){
				if(this.tmpType==1){
					if(this.single_tmp_list.length-1!=this.tabInde){
						this.tabInde=this.tabInde+1;
					}
				}
						
				
				
			},
			upper(){
				if(this.tmpType==1){
					if(this.tabInde!=0){
						this.tabInde=this.tabInde-1;
					}
				}
			},
			get_paper_list(){
				// /api/questions/get_paper_list
				Request('questions/get_paper_list',{
					id:this.idUes
				}).then((data)=>{
					let {single_tmp_list,many_tmp_list,judge_tmp_list}=data;
					console.log(single_tmp_list)//单选
					console.log(many_tmp_list)//多选
					console.log(judge_tmp_list)//判断题
					if(!single_tmp_list.length&& many_tmp_list.length){
						this.tmpType=2;//多选题
					}else if(!single_tmp_list.length&& judge_tmp_list.length){
						this.tmpType=3;//判断题
					}
					this.single_tmp_list=single_tmp_list;
					this.many_tmp_list=many_tmp_list;
					this.judge_tmp_list=judge_tmp_list;
					// question_type
					this.tmp_list=data;
				})
			}
		}
	}
</script>

<style>
	.jishiqi{
		width: 750rpx;
		height: 80rpx;
		background: #F7F8FA;
		color: #646669;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-size: 28rpx;
		font-weight: 400;
	}
	.jishiqi .tim{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: left;
		margin-left: 10rpx;
		font-style: normal;
		text-transform: none;
	}
	.cltitle{
		padding: 32rpx 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #0D0E0F;
		line-height: 52rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.cltitle .tsiy{
		height: 40rpx;
		margin: 10rpx;
		 white-space: nowrap;
		padding: 0 10rpx;
		box-sizing: border-box;
		background: #3B5EEC;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 40rpx;
		font-style: normal;
		text-transform: none;
	}
	.xuanxLisy{
		width: 702rpx;
		padding: 10rpx 24rpx;
		
		background: #F7F8FA;
		margin-bottom: 24rpx;
		box-sizing: border-box;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.TsnA{
		font-family: SF UI Display, SF UI Display;
		font-weight: 800;
		font-size: 28rpx;
		color: #646669;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
		margin-right: 24rpx;
		text-transform: none;
	}
	.TsnC{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #646669;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.xuanxLisy.active{
		background: #3B5EEC;
		color: #FFFFFF !important;
	}
	.xuanxLisy.active .TsnA,.xuanxLisy.active .TsnC{
		color: #FFFFFF !important;
	}
		
	.footer-tiku{
		height: 98rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		position: fixed;
		z-index: 99;
		bottom: 0;
		width: 100%;
		box-shadow: 0rpx -10rpx 10rpx 1rpx rgba(0,0,0,0.05);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.pop-model{
		background-color: rgba(0,0,0,0.7);
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 9;
		top: 0;
		left: 0;
	}
	.left-fs ,.right-fs{
		width: 156rpx;
		height: 80rpx;
		background: #E5E8F7;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #3B5EEC;
		font-style: normal;
		display: flex;
		align-items: center;
		justify-content: center;
		text-transform: none;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
	.left-fs .im,.right-fs .im{
		width: 24rpx;
		height: 24rpx;
	}
	.conter-fs{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.conter-fs .im{
		width: 32rpx;
		margin-right: 12rpx;
		height: 32rpx;
	}
	.xianshConer{
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 10;
		padding-bottom: 98rpx;
		padding-top: 68rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}
	.xianshConer .quxiao{
		width: 24rpx;
		height: 24rpx;
		position: absolute;
		right: 24rpx;
		top: 24rpx;
	}
	.xuan-list{
		width: 72rpx;
		height: 72rpx;
		background: #F7F8FA;
		font-family: MiSans, MiSans;
		font-weight: 500;
		font-size: 28rpx;
		color: #646669;
		line-height: 72rpx;
		text-align: center;
		border-radius: 50%;
		margin-right: 18rpx;
		box-sizing: border-box;
		font-style: normal;
		margin-bottom: 16rpx;
		text-transform: none;
	}
	.xuan-list.acCome{
		background: #E5E8F7;
		border: 2rpx solid #435DE4;
		color: #3B5EEC;
	}
	.xuan-list.active{
		color: #FFFFFF;
		background-color: #3B5EEC;
	}
	
	.xuan-list:nth-child(8n){
		margin-right: 0;
	}
	.xianshConer-title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: left;
		margin-bottom: 16rpx;
		font-style: normal;
		text-transform: none;
	}
</style>